<template>
  <el-dialog
    top="30px"
    width="800px"
    title="共同责任函"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="beforeClose"
  >
    <div
      v-if="!entrustContract || !entrustContract.entrust_contract_id"
      class="p-5 text-center text-muted border rounded bg-light"
    >
      请等待联保机构处理委托合同（共同责任函内需委托合同编号）
    </div>
    <union-letter
      v-else
      @success="handlerSuccess"
      :query-id="queryId"
      :entrustContract="entrustContract"
    ></union-letter>
  </el-dialog>
</template>

<script>
import UnionLetter from '@/bigcredit/views/accept/letter/components/UnionLetter'
import { mapGetters } from 'vuex'
export default {
  components: {
    UnionLetter,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    ...mapGetters(['entrustContract']),
  },
  watch: {
    queryId: {
      handler: function () {
        if (!this.queryId) {
          return
        }
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      this.loading = true
      this.$store.dispatch('getEntrustContract', this.queryId).finally(() => {
        this.loading = false
      })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handlerSuccess() {
      this.$emit('success', true)
    },
  },
}
</script>

<style lang="scss" scoped>
.attach-title {
  font-size: 1.1rem;
  font-weight: bold;
}
</style>
